import './index.css'
import { Layout } from 'antd';
import { ApartmentOutlined, BookOutlined, CaretDownOutlined, CloudUploadOutlined, FontSizeOutlined, FormOutlined, InfoCircleOutlined, PictureOutlined, ProductOutlined, QrcodeOutlined } from '@ant-design/icons'
const { Header, Sider, Content } = Layout;




//组件
import Tab from './components/Tab/Tab.jsx';
import Tabright from './components/Tabright/Tabright.tsx'
import Box from './components/Box/Box.tsx';

const headerStyle: React.CSSProperties = {
  height: 64,
  borderBottom: "1px solid #ccc",
  backgroundColor: '#4096ff'
};

const layoutStyle = {
  borderRadius: 8
};

const siderStyle: React.CSSProperties = {
  color: '#fff',
  backgroundColor: 'pink'
};

const contentStyle: React.CSSProperties = {
  minHeight: 700,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#0958d9',
};
const items: any = [
  {
    id: 1,
    icon: <BookOutlined />,
    title: "模板",
    Children: [
      'src/assets/pbl2.webp',
      'src/assets/pbl2.webp',
      'src/assets/pbl2.webp',
      'src/assets/pbl2.webp',
    ]
  },
  {
    id: 2,
    icon: <FontSizeOutlined />,
    title: "文字",
    Children: [
      'src/assets/pbl3.webp',
      'src/assets/pbl3.webp',
      'src/assets/pbl3.webp',
      'src/assets/pbl3.webp',
    ]
  },
  {
    id: 3,
    icon: <ProductOutlined />,
    title: "素材",
    Children: [
      'src/assets/pbl4.webp',
      'src/assets/pbl4.webp',
      'src/assets/pbl4.webp',
      'src/assets/pbl4.webp',
    ]
  },
  {
    id: 4,
    icon: <PictureOutlined />,
    title: "图片",
    Children: [
      'src/assets/pbl5.webp',
      'src/assets/pbl5.webp',
      'src/assets/pbl5.webp',
      'src/assets/pbl5.webp',
    ]
  },
  {
    id: 5,
    icon: <QrcodeOutlined />,
    title: "二维码",
    Children: [
      'src/assets/pbl2.webp',
      'src/assets/pbl2.webp',
      'src/assets/pbl2.webp',
      'src/assets/pbl2.webp',
    ]
  },
  {
    id: 6,
    icon: <CloudUploadOutlined />,
    title: "上传",
    Children: [
      'src/assets/pbl3.webp',
      'src/assets/pbl3.webp',
      'src/assets/pbl3.webp',
      'src/assets/pbl3.webp',
    ]
  },
]
const items1: any = [
  {
    id: 1,
    icon: <BookOutlined />,
    title: "模板",
    Children: [
      '/src/assets/pbl2.webp',
      'src/assets/pbl3.webp',
      '/src/assets/pbl2.webp',
      'src/assets/pbl3.webp',
    ]
  },
  {
    id: 2,
    icon: <FontSizeOutlined />,
    title: "文字",
    Children: [
      'src/assets/pbl2.webp',
      'src/assets/pbl5.webp',
      '/src/assets/pbl2.webp',
      'src/assets/pbl3.webp',
    ]
  },
  {
    id: 3,
    icon: <ProductOutlined />,
    title: "素材",
    Children: [
      'src/assets/pbl4.webp',
      'src/assets/pbl5.webp',
      '/src/assets/pbl2.webp',
      'src/assets/pbl3.webp',
    ]
  },
  {
    id: 4,
    icon: <PictureOutlined />,
    title: "图片",
    Children: [
      'src/assets/pbl4.webp',
      'src/assets/pbl5.webp',
      '/src/assets/pbl2.webp',
      'src/assets/pbl3.webp',
    ]
  },
  {
    id: 5,
    icon: <QrcodeOutlined />,
    title: "二维码",
    Children: [
      'src/assets/pbl4.webp',
      'src/assets/pbl5.webp',
      '/src/assets/pbl2.webp',
      'src/assets/pbl3.webp',
    ]
  },
  {
    id: 6,
    icon: <CloudUploadOutlined />,
    title: "上传",
    Children: [
      'src/assets/pbl4.webp',
      'src/assets/pbl5.webp',
      '/src/assets/pbl2.webp',
      'src/assets/pbl3.webp',
    ]
  },
]
function App() {
  return (
    <Layout style={layoutStyle}>
      <Header style={headerStyle}>
        <div className="header">
          <div className="h_left">
            <img src="/src/assets/haibao.svg" alt="" style={{
              width: "100px", height: "60px"
            }} />  <span style={{ color: "#ccc", marginLeft: "20px" }}>|</span><span style={{ fontSize: "16px", marginLeft: "20px" }}>易企秀海报制作</span>
          </div>
          <div className="h_cen">
            <p><InfoCircleOutlined style={{ color: "red" }} /><span style={{ color: "red" }}>2</span>个版权风险</p>
          </div>
          <div className="h_right">
            <ul>
              <li><img src="src/assets/vip.svg" alt="" style={{ width: "25px", height: "15px" }} />开通会员</li>
              <li><button><FormOutlined />保存</button></li>
              <li><button><ApartmentOutlined />分享</button></li>
              <li><button style={{ color: "#fff", background: "blue" }}>下载<CaretDownOutlined /></button></li>
              <li><button style={{ background: "#000", color: "#fff" }}>退出</button></li>
            </ul>
          </div>
        </div>
      </Header>
      <Layout>
        <Sider width="350px" style={siderStyle}>
          <Tab items={items}></Tab>
        </Sider>
        <Content style={contentStyle}>
          <div className="box">
            <div className="box_left">
             {/* 拖拽区域 */}
             <Box></Box>
       

            </div>
            <div className="box_right">
             <Sider width="100px" style={siderStyle}>
                <Tabright items1={items1}></Tabright>
             </Sider>
            </div>
          </div>
        </Content>
      </Layout>
    </Layout>
  )
}

export default App
